<template>
  <div id="login">

    <div class="me-login-box me-login-box-radius">
      <h1>登录界面</h1>

      <el-form ref="userForm" :model="userForm" :rules="rules">
        <el-form-item prop="account">
          <div class="my-form1">
            <img src="../assets/img/user.png" id="user-img">
            <input class="my-input" placeholder="用户名" v-model="userForm.account" ref="account" />
          </div>
        </el-form-item>

        <el-form-item prop="password">
          <div class="my-form1">
            <img src="../assets/img/lock.png" id="password-img">
            <input class="my-input" placeholder="密码" type="password" v-model="userForm.password" ref="password"
              @keyup="onHCapitalize($event)" />
            <img :src="eyeSrc" id="eyes-img" ref="eyes" @click="show">
          </div>
        </el-form-item>

        <el-form-item size="small" class="me-login-button">
          <el-button type="primary" @click.native.prevent="login('userForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '../api/api'
import eyesclosedSrc from '../assets/img/eyesclosed.png';
import eyesOpenSrc from '../assets/img/eyes.png';
export default {
  name: 'Login',
  data() {
    return {
      userForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          { required: true, message: '用户名不能为空' }
        ],
        password: [
          { required: true, message: '密码不能为空' },
          { min: 6, message: '密码至少为六位' }
        ]
      },
      flag: false,
      bigChar: 'false',
      eyesclosedSrc,
      eyeSrc:eyesclosedSrc,
      eyesOpenSrc
    }
  },

  methods: {
    login(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.userForm.account.trim() !== "" && this.userForm.password.trim() !== "") {
            let params = new URLSearchParams();
            params.append('account', this.userForm.account);
            params.append('password', this.userForm.password);

            login(params)
              .then(function (response) {
                if (response.data.message === '登录成功') {
                  const token = response.data.token;
                  // 存储 Token 到 localStorage
                  localStorage.setItem('authToken', token);
                  // 根据返回的权限进行路由跳转
                  switch (response.data.permission) {
                    case '超级管理员':
                      that.$router.push({ name: 'superadmin' });
                      break;
                    case '普通管理员':
                      that.$router.push({ name: 'admin' });
                      break;
                    case '注册用户':
                      that.$router.push({ name: 'user' });
                      break;
                    default:
                      console.error('未知权限');
                  }
                } else if (response.data.message === '登录失败') {
                  console.error('登录失败，用户名不存在或者密码错误');
                }
              })
              .catch(function (error) {
                console.error(error);
              });
          } else {
            // 验证账号密码是否为空，并设置输入框边框颜色
            if (this.userForm.account.trim() === "") {
              this.$refs.account.style.borderColor = "red";
            } else {
              this.$refs.account.style.borderColor = "#797979";
            }

            if (this.userForm.password.trim() === "") {
              this.$refs.password.style.borderColor = "red";
            } else {
              this.$refs.password.style.borderColor = "#797979";
            }
            return false;
          }
        }
      });
    },
    show() {
     // 切换密码显示状态
    this.flag = !this.flag;
    // 根据flag的值切换图标
    this.eyeSrc = this.flag ? eyesOpenSrc : eyesclosedSrc;
    // 切换密码输入框的类型
    this.$refs.password.type = this.flag ? 'text' : 'password';
    },
  }
}
</script>


<style scoped>
#my-form1 {
  position: relative;
}

#password-img {
  width: 25px;
  height: 25px;
  position: absolute;
  margin-top: -12.5px;
  top: 50%;
  left: 5px;
}

#user-img {
  width: 20px;
  height: 20px;
  position: absolute;
  margin-top: -10px;
  top: 50%;
  left: 5px;

}

#eyes-img {
  width: 20px;
  height: 20px;
  position: absolute;
  margin-top: -10px;
  top: 50%;
  right: 10px;

}

#login {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background-color: #968fbb;
  color: #FFFFFF;
  transform: scale(1.2);
}

.me-login-box {
  position: absolute;
  width: 300px;
  height: 260px;
  background-color: #464646;
  margin-top: 150px;
  margin-left: -180px;
  left: 50%;
  padding: 30px;
}

.me-login-box-radius {
  border-radius: 10px;
}

.me-login-box h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  vertical-align: middle;
}

.me-login-design {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
}

.me-login-design-color {
  color: #5FB878;
}

.me-login-button {
  text-align: center;
}

.me-login-button button {
  width: 100%;
}

.my-input {
  width: 255px;
  height: 35px;
  background: #323232 !important;
  color: #FFFFFF;
  border: 0.1px solid #797979;
  padding-left: 35px;
}

.bigchar {
  width: 100px;
  height: 30px;
  position: absolute;

}
</style>
